<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app">
			<h1> 数据绑定与watch函数 （三）</h1>
			<h1> 数据双向同步</h1>
			<div id="app-1">
				{{a}}
			</div>
			
			<h1>只读数据属性</h1>
			<div id="app-2">
				<p>{{foo}}</p>
				<!-- 这里的 `foo` 不会更新！ -->
  				<button v-on:click="foo = 'baz'">Change it</button>
			</div>
			
			
			<h1>暴露的属性和方法用 $引用，完整的api请参考api</h1>
			<h2>多值观察写法一</h2>
			<div id="app-3">
				<p>{{a}}</p>
				<p>{{b}}</p>
				<!-- 这里的 `foo` 不会更新！ -->
  				<button v-on:click="a = 'baz'">改变a的值</button>
  				<button v-on:click="b = 'baz'">改变b的值</button>
			</div>
			
			<h2>多值观察写法二</h2>
			<div id="app-4">
				<p>{{a}}</p>
				<p>{{b}}</p>
				<p>{{c}}</p>
				<p>{{d}}</p>
				<p>{{e.f.g}}</p>
				<!-- 这里的 `foo` 不会更新！ -->
  				<button v-on:click="a = 'baz'">改变a的值</button>
  				<button v-on:click="b = 'baz'">改变b的值</button>
  				<button v-on:click="c = 'baz'">改变c的值</button>
  				<button v-on:click="d = 'baz'">改变d的值</button>  				
  				<button v-on:click="e.f.g = 'baz'">改变e.f.g的值</button>
			</div>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">

		//------------数据的双向变化---------------------
		var data={a:"我是1"}
		var app1 = new Vue({
			el: '#app-1',
			data:data,
		})
		//通过控制台，可以看到数据的修改变化是双向的
		//当vue 中的data属性中的数据发生变化时，会触发界面更新
		//vue会跟踪其中的data属性中的数据变化，即时更新
		//不是data属性中的数据，不会触发更新
		app1.a="我是2";
		console.log(data.a);
		//相互影响，保持一致
		data.a="我又是3";
		console.log(app1.a);
		
		//-------------只读数据属性----------------------
		var obj={foo:'bas'};
		//这句话的意思是，不追踪数据的变化。
		Object.freeze(obj);
		
		var app2 =  new Vue({
			el:'#app-2',
			data:obj	
		});
		//打开下面这条语句会在控制台提示，不能改变只读属性的数据
		//obj.foo="hello";
		
		//-------------Vue 	暴露的属性和方法用  $ 引用，完整的api请参考api----------------------
		
		var data3={
			a:1,
			b:2,
			c:3,
			d:4,
		};
		var app3 =  new Vue({
			el:'#app-3',
			data:data3	
		});
		
		console.log(app3.$data === data3 );
		console.log(app3.$el === document.getElementById('app-3') );
		app3.$watch('a',function(newvalue,oldvalue){
			//这个方法将在a的值发生变化后调用
			alert("a的值发生变化了" + "新的值是:" + newvalue + " 原来的值是: " +oldvalue);
			console.log(newvalue);
		});
		
		app3.$watch('b',function(newvalue,oldvalue){
			//这个方法将在a的值发生变化后调用
			alert("b的值发生变化了" + "新的值是:" + newvalue + " 原来的值是: " +oldvalue);
			console.log(newvalue);
		});
		
		//另一种写法多值观察
		app3.$watch(
			'c',function(newvalue,oldvalue){
				//这个方法将在a的值发生变化后调用
				alert("c的值发生变化了" + "新的值是:" + newvalue + " 原来的值是: " +oldvalue);
				console.log(newvalue);
			},
			'd',function(newvalue,oldvalue){
				alert("d的值发生变化了" + "新的值是:" + newvalue + " 原来的值是: " +oldvalue);				
			}
		);
		
		var data4= {
			    a: 1,
			    b: 2,
			    c: 3,
			    d: 4,
			    e: {
			      f: {
			        g: 5
			      }
			    }
			  };
		
		//------------------------------
		var app3 =  new Vue({
			el:'#app-4',
			data:data4,
			methods:{
				bwatchMethod:function  (newvalue,oldvalue){
					alert("value B is changed: " + newvalue +"old value" + oldvalue);
				}			
			},
			watch:{
				a:function(newvalue,oldvalue){
					console.log("深度侦听  A");
				},
				//这个方法要写在Vue 内部的methods中
				b:'bwatchMethod',
				//深度侦听
				c:{
					handler:function(newvalue,oldvalue){
						console.log("深度侦听  C");
					},
					deep:true
				},
				 // 该回调将会在侦听开始之后被立即调用
			    d: {
			      handler: function (val, oldVal) { 
			      	console.log("回调开始之前");
			      },
			      immediate: true
			    },
			    e: [
			      function handle1 (val, oldVal) { 
			      		console.log("e call back"); 
			      },
			      function handle2 (val, oldVal) { 
			      		console.log("e handler2 call back");
			      }
			    ],
			    // watch vm.e.f's value: {g: 5}
			    'e.f.g': function (val, oldVal) { 
			    	console.log("efg call back") 
			   	}
			}
		});

	</script>

</html>